<template>
  <div class="fault-detial">
    <el-dialog
      v-model="dialogVisible"
      title="故障详情"
      width="600"
      draggable
      @close="closeDetial"
    >
      <div class="fault-info-title">上报信息</div>
      <div class="fault-info">
        <div class="fault-row">
          <div class="fault-item">
            <span>故障编号</span>
            <el-input
              v-model="faultId"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
          <div class="fault-item">
            <span>车辆编号</span>
            <el-input
              v-model="faultId"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
        </div>
        <div class="fault-row">
          <div class="fault-item">
            <span>故障状态</span>
            <el-input
              v-model="faultState"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
          <div class="fault-item">
            <span>故障类别</span>
            <el-input
              v-model="faultContent"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
        </div>
        <div class="fault-row">
          <div class="fault-item">
            <span>上报人员</span>
            <el-input
              v-model="faultPerson"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
          <div class="fault-item">
            <span>上报时间</span>
            <el-input
              v-model="faultDate"
              style="width: 180px"
              size="small"
              disabled
            />
          </div>
        </div>
        <div class="fault-row">
          <div class="fault-item">
            <span>上报备注</span>
            <el-input
              v-model="faultContent"
              style="width: 400px"
              size="small"
              disabled
            />
          </div>
        </div>
        <div class="fault-row">
          <div class="fault-item">
            <span>车辆地点</span>
            <el-input
              v-model="faultPosition"
              style="width: 400px"
              size="small"
              disabled
            />
          </div>
        </div>
      </div>
      <!-- 信息处理 -->
      <div class="fault-info-title">处理信息</div>
      <div class="fault-info">
        <div class="fault-row">
          <div class="fault-item">
            <span>处理人员</span>
            <el-input
              style="width: 180px"
              size="small"
              disabled
              v-model="currentLoginName"
            />
          </div>
          <div class="fault-item">
            <span>处理时间</span>
            <el-input
              style="width: 180px"
              size="small"
              :disabled="currentLoginType != 2"
              v-model="handleFaultDate"
            />
          </div>
        </div>
        <div class="fault-row">
          <div class="fault-item">
            <span>处理备注</span>
            <el-input
              style="width: 400px"
              size="small"
              :disabled="currentLoginType != 2"
              v-model="handleFalutNote"
            />
          </div>
        </div>
      </div>
      <div v-if="currentLoginType == 2" class="falut-btn">
        <el-button type="primary" @click="getTask">任务领取</el-button>
        <el-button type="success" @click="handleTask">完成处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { storeToRefs } from "pinia";
import { usePostStore } from "@/stores";
import {updateCarById} from '@/api/api'
import {ElMessage} from 'element-plus'
const stores = usePostStore();
const { currentLoginType,currentLoginName } = storeToRefs(stores);
const dialogVisible = ref(true);
const emits = defineEmits(["closeDetail"]);
const props = defineProps({
  selectCar: {
    type: Object,
    reqiured: true,
  },
});
//故障编号
const faultId = ref("");
//故障状态
const faultState = ref("");
//故障类别
const faultContent = ref("");
//上报人员
const faultPerson = ref("");
//上报时间
const faultDate = ref("");
//故障地点
const faultPosition = ref("");
onMounted(async () => {
  faultId.value = props.selectCar.id;
  faultState.value = props.selectCar.faultState;
  faultContent.value = props.selectCar.faultContent;
  faultPerson.value = props.selectCar.faultPerson;
  faultDate.value = props.selectCar.faultDate;
  //计算故障的地点
  const url = `/geocoder?location=${props.selectCar.coordinates[1]},${props.selectCar.coordinates[0]}&key=LL6BZ-ZGM6L-OCDPP-EX7P7-YL2WH-J6BGS`;
  const res = await axios.get(url);
  console.log(res);
  faultPosition.value = res.data.result.address;
});
//信息关闭的事件
const closeDetial = () => {
  emits("closeDetail");
};

//处理故障的时间
const handleFaultDate = ref("");
//处理故障报备
const handleFalutNote = ref("");

//是否领取任务
let isGetTask = false;
//领取任务
const getTask = async()=>{
  //将该车辆的信息进行改
  const data = {
    faultState:"处理中",
    handleFalutPerson:currentLoginName.value,
    handleFalutNote:handleFalutNote.value,
    handleFaultDate:handleFaultDate.value,
  }
  const res = await updateCarById(faultId.value,data);
  console.log(res);
  isGetTask = true;
}
//完成任务
const handleTask = async()=>{
  if(!isGetTask){
    ElMessage({message:"请先领取任务",type:"warning"});
    return;
  }
  const data = {
    faultContent:"",
    faultDate:"",
    faultState:"",
    state:"正常",
  }
  const res = await updateCarById(faultId.value,data);
  console.log(res);
  isGetTask = false;
}
</script>

<style scoped>
.fault-detial {
  position: relative;
}
.fault-info-title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  margin-bottom: 10px;
  font-weight: 600;
}
.fault-info {
  margin-top: 30px;
}
.fault-info .fault-row {
  display: flex;
  justify-content: space-between;
}
.fault-info .fault-row .fault-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 10px 0;
}
.fault-detial .falut-btn {
  display: flex;
  justify-content: flex-end;
}
</style>
